<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-11-07 13:23:48
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-11-07 18:30:52
 * @Description : 根组件
-->
<script setup>
 import { defineAsyncComponent, shallowRef} from 'vue'
import config from './config'
//import RemoteButton from '../../remote-vue3.2/src/RemoteButton.vue'
//import RemoteButton from '../../remote-vue3.2/dist/remote-app'

//import RemoteButton from 'remoteApp/RemoteButton'
//const  RemoteButton = () => import('http://localhost:5002/remote-app.js').then(com=>{
//})

const RemoteButton = shallowRef()
function onClick(count){
  console.log({count},'事件抛出的事件')
  config.test()
}

loadRemoteApp()

function loadRemoteApp(){
  window.requirejs(['http://localhost:5002/remote-app.umd.cjs'],comjs=>{
    RemoteButton.value = comjs
  })
  //import('http://localhost:5002/remote-app.js').then(Com=>{
  //  com.value = Com
  //})
}
</script>

<template>
  <div class="App">
    <link rel="stylesheet" href="http://localhost:5002/style.css" />
    host vue3.5
    <!--<RemoteButton msg="腾讯组件库" @click-on="onClick" />-->
    <component :is="RemoteButton" msg="远程模块" @click-on="onClick"></component>
  </div>
</template>

<style lang="css">
.App {
    background-color: aquamarine;
}
</style>
